<template>
	<view class="task_container">
		<z-paging ref="paging" v-model="dataList" @query="queryList" empty-view-img="../../static/img/nullData.png"
			empty-view-text="暂无数据">
			<!-- 头部固定 -->
			<view slot="top">
				<!-- 标题 -->
				<title-component titleName="我的任务" :isShowMore="false" :isShowBtn="true" @open="toReleaseTask">
				</title-component>
				<!-- tab切换 -->
				<u-tabs :list="topList" @click="handleTopList" lineColor='var(--echo-main-color)'></u-tabs>
			</view>
			<!-- 我认领的任务 -->
			<view class="" v-if="itemIndex == 0">
				<my-task v-for="item in dataList" :key='item.serialNo' :dataItem='item' @complete="complete">
				</my-task>
			</view>
			<!-- 我发布的任务 -->
			<view class="releaseTask" v-else>
				<release-task v-for="item in dataList" :dataItem='item' :key='item.serialNo'
					@release="release(item.serialNo)" @audit="audit(item.serialNo, item.submitContent)">
				</release-task>
				<!-- 弹出确认框 -->
				<u-modal :show="isrelease" content='确认发布该任务' :showCancelButton="true" @confirm="confirmRelease"
					:closeOnClickOverlay="true" @close="closeRelease" @cancel="cancelRelease"></u-modal>
				<u-modal :show="isAudit" :showCancelButton="true" @confirm="confirmAudit" :closeOnClickOverlay="true"
					@close="closeAudit" @cancel="cancelAudit">
					<view class="task_content">
						<view class="confirm_tips">确认审核该任务</view>
						<u--form labelPosition="top" :model="examineInfo" ref="examineForm" :rules="rules">
							<u-form-item label="提交反馈" labelWidth="auto">
								<u--textarea v-model="viewSubmitContent" disabled border="bottom"></u--textarea>
							</u-form-item>
							<u-form-item label="审核结果" prop="auditStatus" labelWidth="auto">
								<u-radio-group v-model="examineInfo.auditStatus">
									<u-radio label="驳回" activeColor="var(--echo-main-color)" :name="'1'"></u-radio>
									<u-radio label="通过" activeColor="var(--echo-main-color)" style="margin-left: 40rpx;"
										:name="'0'">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="审核意见" labelWidth="auto">
								<u--textarea placeholder="如过驳回请输入驳回原因" v-model="examineInfo.remark"></u--textarea>
							</u-form-item>
						</u--form>
					</view>
				</u-modal>
			</view>
			<u-modal :show="isSubmit" :showCancelButton="true" @confirm="confirmSubmit" :closeOnClickOverlay="true"
				@close="closeSubmit" @cancel="cancelSubmit">
				<view class="task_content">
					<view class="confirm_tips">确认提交该任务</view>
					<u--textarea placeholder="请输入任务完成反馈" v-model="submitContent"></u--textarea>
				</view>
			</u-modal>
		</z-paging>
	</view>
</template>
<script>
	import {
		getClaimedTasks,
		getMyTaskPageList,
		publishTask,
		submitTask,
		auditTask
	} from '@/config/taskApi.js';
	export default {
		data() {
			return {
				// 用户标识
				// tab切换
				topList: [{
						name: '我认领的',
					},
					{
						name: '我发布的',
					}
				],
				// 控制tab
				itemIndex: 0,
				// 审核弹出模态框
				isAudit: false,
				// 发布弹出确认框
				isrelease: false,
				// 提交弹出模态框
				isSubmit: false,
				// 任务编号
				serialNo: '',
				// 提交任务的完成反馈
				submitContent: '',
				// 审核驳回原因
				reasonContent: '',
				// 审核查看到的会显的提交的反馈
				viewSubmitContent: '',
				// 请求过来的数据
				dataList: [],
				// 审核信息
				examineInfo: {
					auditStatus: '0',
					remark: '',
				},
				// 验证规则
				rules: {
					'auditStatus': {
						type: 'string',
						required: true,
						message: '请选择审核结果',
					}
				}
			}
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		methods: {
			// z-paging组件
			queryList(pageNo, pageSize) {
				// 一开始是0
				// 查询我认领的
				if (!this.itemIndex) {
					getClaimedTasks({
						pageNo,
						pageSize,
						customerNo: this.customerNo
					}).then(res => {
						console.log('我认领的任务', res)
						this.$refs.paging.completeByTotal(res?.data, res?.pagination?.totalSize);
					})
					return
				}
				// 查询我发布的
				getMyTaskPageList({
					pageNo,
					pageSize,
					customerNo: this.customerNo
				}).then(res => {
					console.log('我的任务', res)
					this.$refs.paging.completeByTotal(res?.data, res?.pagination?.totalSize);
				})
			},
			// 头部tab切换
			handleTopList(item) {
				this.itemIndex = item.index
				this.$refs.paging.reload();
			},
			// 发布跳转
			toReleaseTask() {
				uni.navigateTo({
					url: "/pages/my/releaseTask"
				})
			},
			// 发布
			release(serialNo) {
				// 发布弹出框
				this.isrelease = true
				console.log('serialNo', serialNo)
				this.serialNo = serialNo
			},
			// 确认发布
			confirmRelease() {
				publishTask({
					serialNo: this.serialNo
				}).then(res => {
					if (res) {
						console.log('res', res)
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '发布成功'
						});
						// 重新刷新一下数据 我发布的
						this.$refs.paging.reload();
					}
					// 关闭提示框
					this.isrelease = false
				})
			},
			// 取消发布
			cancelRelease() {
				this.isrelease = false
			},
			// 模态框关闭
			closeRelease() {
				this.isrelease = false
			},
			// 审核
			audit(serialNo, viewSubmitContent) {
				this.serialNo = serialNo
				this.isAudit = true
				this.viewSubmitContent = viewSubmitContent
			},
			// 确认审核
			confirmAudit() {
				auditTask({
					serialNo: this.serialNo,
					...this.examineInfo
				}).then(res => {
					if (res) {
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '审核成功'
						});
						this.isAudit = false
						// 重新刷新一下数据  我发布的
						this.$refs.paging.reload();
					}
				})
			},
			// 取消审核
			closeAudit() {
				this.isAudit = false
			},
			cancelAudit() {
				this.isAudit = false
			},
			// 提交
			complete(serialNo) {
				this.isSubmit = true
				this.serialNo = serialNo
			},
			// 提交任务
			confirmSubmit() {
				submitTask({
					serialNo: this.serialNo,
					submitContent: this.submitContent
				}).then(res => {
					console.log(res)
					if (res) {
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '提交成功'
						});
						// 重新请求任务数据 我认领的任务
						this.$refs.paging.reload();
					}
					this.isSubmit = false
				})
			},
			// 取消提交
			closeSubmit() {
				this.isSubmit = false
			},
			cancelSubmit() {
				this.isSubmit = false
			}
		}
	}
</script>
<style lang="scss">
	.task_container {

		/* 确保没有高度的时候也会100% */
		min-height: 100vh;
		background-color: #F9F9F9;

		// 弹出框
		.popup {
			width: 100%;

			// 创建任务
			.createTask {
				position: relative;
				width: 620rpx;
				padding: 30rpx 30rpx;
				border-radius: 10rpx;
				font-size: 28rpx;
				height: 680rpx;

				// 创建按钮
				.toCreate {
					position: absolute;
					left: 50%;
					margin-left: -150rpx;
					width: 300rpx;
					bottom: 40rpx;
				}
			}
		}

		.task_content {
			width: 100%;
		}

		// 任务提醒
		.confirm_tips {
			font-size: 15px;
			color: #606266;
			margin-bottom: 40rpx;
			text-align: center;

		}
	}
</style>
